:root {
		--text: rgb(77, 43, 30);
		--lightText: rgb(253, 250, 237);
		--mainColor1: rgb(143, 195, 209);
		--darkBlue-ish: rgb(88, 132, 145);;
		--mainColor2: rgb(227, 72, 121);
		--darkPink-ish: rgb(235, 93, 140);
		--mainColor3: rgb(158, 138, 196);
		--darkPink: rgb(210, 48, 99);;
		--darkBlue: rgb(159, 174, 206);
		--darkLilac-ish: rgb(106, 123, 159);
		--shadow: rgb(34, 29, 82);
		--bg: hwb(42 95% 0%);
		--bgTrans: rgba(255 254 250 / 0.8);
		--bgTrans2: rgba(0, 0, 0, 0.5);
	}



body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);
	background-color: var(--bg);
	background-size: 1400px;
	background-image: url(/img/bg_sky1.png);
	background-attachment: fixed;
	font-size: 18px;
}

body::selection {
	background-color: var(--mainColor1);
	color: var(--bg);
}

@font-face {
    font-family: pixelHeading;
    src: url(/fonts/Redaction50-Regular.otf);
}

@font-face {
    font-family: pixelGothic;
    src: url(/fonts/GothicPixels.ttf);
}

@font-face {
    font-family: pixelTitle;
    src: url(/fonts/TheWall.ttf);
}

@font-face {
    font-family: normalText;
    src: url(/fonts/lmmono10-regular.otf);
}

@font-face {
	font-family: italicText;
	src: url(/fonts/lmmono10-italic.otf);
}

@font-face {
	font-family: pixelNormal;
	src: url(/fonts/VT323-Regular.ttf);
}

@font-face {
	font-family: pixelHeadingItalic;
	src: url(/fonts/Redaction50-Italic.otf);
}

/* In the future, there will be light (mode), hopefully
	@media (prefers-color-scheme: light) {
		:root {
			--text: white;
			--border: #5a7678;
			--accent: #74C365;
			--bg: rgb(0,60,60,.8);
			--gradientBottom: rgb(0, 50, 60);
			--gradientTop: darkslategrey;
			a:link { color: lightblue; }
		}

	}
*/

* {
	box-sizing: border-box;
	font-family: normalText;
}



.italic {
	font-family: italicText;
}

.blueText {
	color: var(--darkLilac-ish);
}

.center {
text-align: center;
}

.left {
text-align: left;
}

.right {
text-align: right;
}


header {
	margin: auto;
	text-align: center;
	
}

#title {
	color: var(--bg);
	font-family: pixelTitle;
    font-size: 60px;
    text-shadow: 2px 2px var(--shadow);
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	color: var(--bg);
	line-height: .6;
}

#titleV2 {
	color: var(--bg);
	font-family: pixelTitle;
    font-size: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	color: var(--bg);
}


h1 {
    font-family: pixelHeading;
}

.flex {
	display: flex;
}

.grid {
	display: grid;
}

.flexGrid {
	display: flex;
	margin-top: 30px;
    margin-left: -20px;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-line {
	display: flex;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	gap: 18px;
}

      .button {
        border: 1px solid rgb(0, 0, 0);
        padding: 10px;
        font-size: 18px;
        margin-right: 5px;
        margin-left: 5px;
        background-color: var(--mainColor2);
        color: var(--bg);
        margin-bottom: 5px;
        transition-property: background-color;
        transition-duration: .5s;
		height: fit-content;

      }

      .button:hover {
        background-color: var(--darkBlue);
        box-shadow: 2px 2px rgb(11, 2, 74);
		font-family: italicText;
      }

      .blue-button {
        border: 1px solid rgb(0, 0, 0);
        padding: 10px;
        font-size: 15px;
        margin-right: 5px;
        margin-left: 5px;
        background-color: var(--darkLilac-ish);
        color: var(--bg);
        margin-bottom: 5px;
        transition-property: background-color;
        transition-duration: .5s;

      }

      .blue-button:hover {
        background-color: var(--mainColor2);
        box-shadow: 2px 2px rgb(11, 2, 74);
		font-family: italicText;
      }

	  #home-button {
		width: 100px;
		text-align: center;
	  }

	  a {
		text-decoration: none;
	  }
	

.box {
	border: 1px solid black;
	box-shadow: 6px 6px  rgb(9, 0, 63);
	background-color: var(--bg);
	padding: 34px;
	margin-left: auto;
	margin-right: auto;

}

.noShadowBox {
	border: 1px solid black;
	background-color: var(--bg);
	padding: 34px;
	margin-left: auto;
	margin-right: auto;

}

.darkBox {
	background-color: var(--bgTrans2);
	color: var(--bg);
	text-shadow: 2px 2px rgb(28, 28, 66);
	border: 1px solid white;
}

.note {
	margin-top: 40px;
	max-width: 600px;
	background-color: rgb(255, 243, 219);
	color:rgb(129, 106, 79);
    rotate: 1deg;
}

.narrator-box {
	border: 1px solid white;
	box-shadow: 6px 6px rgb(2, 0, 5);
	color: rgb(252, 236, 232);
	padding: 20px;
	font-family: pixelNormal;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	max-width: 600px;
	font-size: 24px;
	background-color: black;
}



.narrator-link {
	color: rgb(255, 243, 234);
	text-decoration-line: underline;
	font-family: italicText;
}

.narrator-link:hover {
	font-family: italicText;
	font-size: 22px;
	background-color: var(--darkPink);
}

.funky-box {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA9UlEQVRYR+2WQRKDIBAE9T35/1PynuRgTUWn6IhkSS0WfUNhZ2gvrsvyeC0DsA5c9LnmEHz80gWj6YuqoIr7WkRdhOaW83dGv2/8kKaooIJ+kav4ecoR2/uCUUEDaH8tfp5yBBb1g44PaqU25z5FyXAvo55XbdTXIk1R4YV7Q3loVNDzXlDeadEszKLRTKPRTKPRTKPRTKPRTKPR3MfodpP//VVR3qlRet4LysOitBY+qBWaW86/Q1Gil1Gn2iiRpqjwwn6R1sJ+nnLE9r5gVNAA2l+Ln6ccgUVpLXxQKzS3nD9iURFl7FeOxndGxTBFc1IwmpM3D379D4GeIqMAAAAQZGVCR0I4MEU2NDBDQTIyRkY0QjCJOXGRAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
	background-color: var(--bgTrans);
}

.transparent-box {
	border: 1px solid black;
	box-shadow: 6px 6px  black;
	background-color: var(--bgTrans);
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
}


.normal-box {
	border: 1px solid black;
	box-shadow: 6px 6px  black;
	background-color: var(--bg);
	padding: 34px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	max-width: 600px;
	padding: 45px;
}

.white-link {
	color: var(--bg);
	text-decoration-line: underline;
}

.white-link:hover {
	font-family: italicText;
}


.pink-link {
	color: var(--darkPink-ish);
	text-decoration: underline;
}

.pink-link:hover {
	background-color: var(--darkPink-ish);
	color: var(--bg);
	font-family: italicText;
}

.blue-link {
	color: var(--darkBlue-ish);
	text-decoration: underline;
}

.blue-link:hover {
	background-color: var(--darkBlue-ish);
	color: var(--bg);
	font-family: italicText;
}

.lilac-link {
	color: var(--darkLilac-ish);
	text-decoration: underline;
}

.lilac-link:hover {
	background-color: var(--darkLilac-ish);
	color: var(--bg);
	font-family: italicText;
}

.negative-link {
	color: var(--bg);
}

.negative-link:hover {
	background-color: var(--bg);
	color: var(--darkLilac-ish);
	font-family: italicText;
}

.hide {
	display: none;
}

.narrator-box a {
	font-family: pixelNormal;
}


footer {
	text-align: center;
	font-size: 17px;
}



.img-cover {
	border: 1px solid black;
	box-shadow: 6px 6px black;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	padding: 0px;
}

.img-cover-noshadow {
	border: 1px solid black;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	padding: 0px;

}

.img-cover img {
display: block;
margin: 0px;
width: 100%;
min-width: 150px;

}

.img-cover-noshadow img {
	display: block;
	margin: 0px;
	width: 100%;
	min-width: 150px;

}

.img-footer {
	padding: 20px;
	background-color: black;
	color: var(--bg);
	border: 1px solid rgb(255, 255, 255);
	font-size: 16px;
}

blockquote {
	font-size: 16px;
	color:rgb(129, 106, 79);
	margin-left: 20px;
	margin-bottom: 30px;
}

.ref-tags {
	display: block;
}

.highlighter {
	color: var(--bg);
	background-color: var(--darkPink-ish);
}

.taped {
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	left: 200px;
	bottom: 320px;
}

.parche {
	outline-offset: 12px;
    outline: 2px var(--bg) dashed;
	background-color: var(--bg);
}

/*Pulse-grow hover animation*/
@-webkit-keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.hvr-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/*Home-button*/
      .home-button {
        position: relative;
        max-width: 200px;
        display: flex; 
        flex-direction: column;
        align-items: center;
        height: fit-content;
      }

      .homeLabel {
        text-align: center;
        margin-top: -70px;
        color: white;
        font-family: pixelHeadingItalic;
        text-shadow: 1px 1px black;
        opacity: 0;
		font-size: 24px;
        transition-property: opacity;
        transition-duration: .2s;
      }

      .home-button:hover .homeLabel {
        opacity: 1;
      }

	  /* lists */

	  .lightbulbList {
		list-style-image: url(/img/bulletpoint_lightbulb.gif);
	  }